/**
 * @description 嗨豆
 */
import style from './styles/Home.less';
import classnames from "classnames";
import React, { Component } from 'react';
import util from "commons/util";
import { Toast, Dialog } from 'wd-mobile';
//img
import gold_beans from './images/gold_beans.png'
import icon_official from './images/icon_official.png'

import icon_routine from './images/icon_routine.png'
import icon_alert from './images/icon_alert.png'
import icon_shop from './images/icon_shop.png'
import icon_share from './images/icon_share.png'
import icon_beans from './images/icon_beans.png'

import * as beans from 'api_xukaiyu/app/beans';

class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            beans: {}
        };
    }

    componentDidMount() {
        this.getBeanStatus();
    }

    //嗨豆状态
    getBeanStatus() {
        beans.user_status().then(data => {
            this.setState({
                beans: data.data
            })
        })
    }
    //去签名
    toSign() {
        beans.sign_add_beans().then(data => {
            Toast.info('签到成功！', 1000, () => {
                this.getBeanStatus();
            })
        })
    }

    //去购物
    toShop() {
        util.checkWechatEnv((res) => {
            if (res == 'miniprogram') {
                wx.miniProgram.switchTab({
                    url: '/pages/category/category'
                })
            } else {
                location.href = './category.html';
            }
        })

    }


    render() {
        let { beans } = this.state;
        return (<div className={style.Home}>
            <div className={style.header}>
                <div className={style.explain} onClick={() => {
                    Dialog.alert(<div style={{ textAlign: 'left' }}>
                        1.嘿豆仅可在出卡啦权益使用，如用户存在违规行为，则出卡啦有权取消用户账户嘿豆以及其他相关权益；<br />
                        2.嘿豆有效期为3个月，逾期未使用的嘿豆将会被扣除。例2019年1月10日获得的嘿豆奖励，如果没有使用完的，将会在2019年5月1日0点清空；<br />
                        3.使用嘿豆支付的商品发生退款时，嘿豆将会被退回；<br />
                        4.100嘿豆可抵扣1人民币，每单最多嘿豆可抵扣比例有限制，具体以页面提示为准；<br />
                        5.使用嘿豆时不支持手动修改使用嘿豆的数量，仅可选择使用嘿豆与不使用嘿豆；<br />
                        6.嘿豆的使用与消耗方式，以活动页面展示为准，部分活动仅限参与一次，部分活动每日获得嘿豆有上限；<br />
                    </div>, '嘿豆说明')
                }}>嘿豆说明</div>
                <div className={style.haidou}>
                    <div className={style.subTitle}>当前可用嘿豆</div>
                    <div className={style.beansNum}><img src={gold_beans} alt="" />{beans.beanNums}</div>
                    <div className={style.tips}>嘿豆可抵现，100嘿豆=1元</div>
                    <div className={style.beanDetail} onClick={() => {
                        location.href = `./hibeans.html#/Detail`;
                    }}>收支明细 > </div>
                </div>
            </div>
            <div className={style.taskList}>
                <div className={style.title}>赚嘿豆<span>+</span></div>
                <div className={style.task}>
                    <div className={style.icon}><img src={icon_official} alt="" /></div>
                    <div className={style.content}>
                        <div className={style.title}>签到得豆</div>
                        <div className={style.detail}>每天签到立即得<span>{beans.signBeans}嘿豆</span></div>
                    </div>
                    <div className={style.operate}>
                        <div className={classnames(style.btn, { [style.success]: beans.hasSign })} onClick={() => { !beans.hasSign && this.toSign() }}>{!beans.hasSign ? '签到' : '已完成'}</div>
                    </div>
                </div>
                <div className={style.task} hidden={beans.dayFirstBillNum == '-1'}>
                    <div className={style.icon}><img src={icon_routine} alt="" /></div>
                    <div className={style.content}>
                        <div className={style.title}>首单额外返豆</div>
                        <div className={style.detail}>每天首单额外返<span>{beans.dayFirstBillNum}嘿豆</span></div>
                    </div>
                    <div className={style.operate}>
                        <div className={classnames(style.btn, { [style.success]: beans.hasBuyToday })} onClick={() => { !beans.hasBuyToday && this.toShop() }}>{!beans.hasBuyToday ? '去购物' : '待到账'}</div>
                    </div>
                </div>
                <div className={style.task}>
                    <div className={style.icon}><img src={icon_alert} alt="" /></div>
                    <div className={style.content}>
                        <div className={style.title}>提醒得豆</div>
                        <div className={style.detail}>开启线报提醒功能，每条可获得<span>{beans.noticeBeanNum}嘿豆</span></div>
                    </div>
                    <div className={style.operate}>
                        <div className={classnames(style.btn, { [style.success]: beans.noticeTimes >= 3  })} onClick={() => {

                            util.checkWechatEnv((res) => {
                                if (res == 'miniprogram') {
                                    wx.miniProgram.switchTab({
                                        url: '/pages/market/market'
                                    })
                                } else {
                                    location.href = './market.html#/Collection';
                                }
                            })
                                

                        }}>{beans.noticeTimes >= 3 ? '已完成' : '去完成'}</div>
                        <div hidden={beans.noticeTimes >= 3} className={style.tips}>每日{beans.noticeTimes}/3</div>
                    </div>
                </div>
                <div className={style.task}>
                    <div className={style.icon}><img src={icon_shop} alt="" /></div>
                    <div className={style.content}>
                        <div className={style.title}>购物返豆</div>
                        <div className={style.detail}>每消费一元，返<span>{beans.perRmbBeanNum}嘿豆</span></div>
                    </div>
                    <div className={style.operate}>
                        <div className={style.btn} onClick={() => { this.toShop() }}>去购物</div>
                    </div>
                </div>
                <div className={style.task}>
                    <div className={style.icon}><img src={icon_share} alt="" /></div>
                    <div className={style.content}>
                        <div className={style.title}>分享刮分</div>
                        <div className={style.detail}>购物成功后，分享购物红包，与好友一起瓜分</div>
                    </div>
                    <div className={style.operate}>
                        {/* <div className={style.btn} onClick={()=>this.toShop()}>去分享</div> */}
                    </div>
                </div>
            </div>
            <div className={classnames(style.payDean, style.taskList)}>
                <div className={style.title}>花嘿豆</div>
                <div className={style.task}>
                    <div className={style.icon}><img src={icon_beans} alt="" /></div>
                    <div className={style.content}>
                        <div className={style.title}>当钱花</div>
                        <div className={style.detail}>嘿豆当钱花，每100嘿豆可以抵扣1元，多买多抵扣！</div>
                    </div>
                    <div className={style.operate}>
                        <div className={style.btn} onClick={() => this.toShop()}>去购物</div>
                    </div>
                </div>
            </div>
        </div>
        );
    }
}

export default Home;